
<style scoped lang="scss">
.editor-container{
  position: relative;
  height: 100%;
}
</style>
<template>
  <div class="app-container">
    <div class="">
      <el-form :inline="true" :model="listQuery">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="">
              <el-input v-model="listQueryFieldValue" placeholder="请输入内容" class="input-with-select" clearable style="width: 400px;">
                <el-select slot="prepend" v-model="listQueryField" placeholder="请选择" style="width: 120px">
                  <el-option v-for="(item,key) in listQueryFieldMap" :key="key" :value="item.field" :label="item.label">{{ item.label }}</el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="listQuery.method" placeholder="请选择请求类型" clearable>
                <el-option
                  v-for="item in methods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button v-waves plain class="filter-item" @click="resetGetList()">重置</el-button>
              <el-button v-waves type="primary" icon="el-icon-search" class="filter-item" @click="getList">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="display: flex;flex-direction: row-reverse">
            <el-form-item>
              <!--<el-button v-waves type="primary" icon="el-icon-circle-plus-outline" class="filter-item" @click="clickCreate">新增用户</el-button>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      fit
      highlight-current-row
      border
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column align="center" type="index" width="80" label="序号" />
      <el-table-column label="链路ID" prop="trace_id" width="300" />
      <el-table-column label="请求类型" prop="method" width="100">
        <template v-slot="scope">
          {{ scope.row.method }}
          <!--
          <el-tag :type="methodMap[scope.row.method] || 'info'" effect="dark" size="mini">
          </el-tag>
          -->
        </template>
      </el-table-column>
      <el-table-column label="路由地址" prop="route" show-overflow-tooltip />
      <el-table-column label="请求客户端IP" prop="ip" />
      <el-table-column label="请求时间" prop="request_at" />
      <el-table-column fixed="right" label="HTTP状态码" prop="http_status_code">
        <template v-slot="scope">
          <el-tag :type="httpStatusCodeMap[scope.row.http_status_code] || 'info'" effect="dark" size="mini">
            {{ scope.row.http_status_code }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="响应时间" prop="response_at" />
      <el-table-column fixed="right" label="响应结果状态码" prop="response_code">
        <template v-slot="scope">
          <el-tag :type="responseCodeMap[scope.row.response_code] || 'danger'" effect="dark" size="mini">
            {{ scope.row.response_code }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="响应结果" prop="response_data">
        <template v-slot="scope">
          <el-button v-waves type="primary" plain icon="el-icon-view" class="filter-item" size="mini" @click="clickShowJsonData(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="getList" />

    <el-drawer
      ref="drawer"
      :title="rowJsonDrawerTitle"
      :visible.sync="drawerVisible"
      :close-on-press-escape="false"
      :wrapper-closable="true"
      :destroy-on-close="true"
      :with-header="true"
      size="50%"
      direction="rtl"
    >
      <div class="drawer-http-main" style="margin: 20px;height: calc(100vh - 100px);overflow-y: auto;">
        <el-form :model="rowData" label-width="80px">
          <el-form-item label="链路ID">
            <el-input v-model="rowData.trace_id" />
          </el-form-item>
          <el-form-item label="请求方法">
            <el-input v-model="rowData.method" />
          </el-form-item>
          <el-form-item label="路由地址">
            <el-input v-model="rowData.route" />
          </el-form-item>
          <el-form-item label="客户端IP">
            <el-input v-model="rowData.ip" />
          </el-form-item>
          <el-form-item label="请求时间">
            <el-input v-model="rowData.request_at" />
          </el-form-item>
          <el-form-item label="HTTP状态码">
            <el-input v-model="rowData.http_status_code" />
          </el-form-item>
          <el-form-item label="响应码">
            <el-input v-model="rowData.response_code" />
          </el-form-item>
          <el-form-item label="响应时间">
            <el-input v-model="rowData.response_at" />
          </el-form-item>
          <el-form-item label="请求参数">
            <json-viewer
              :value="rowData.request_data"
              :expand-depth="5"
              copyable
              boxed
              sort
            />
          </el-form-item>
          <el-form-item label="响应结果">
            <json-viewer
              :value="rowData.response_data"
              :expand-depth="5"
              copyable
              boxed
              sort
            />
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import Pagination from '@/components/Pagination/index.vue' // Secondary package based on el-pagination
import { getHttpLogList } from '@/api/system/log'
import clipboard from '@/utils/clipboard'
import JsonViewer from '@/components/vue-json-viewer-master/lib'

export default {
  name: 'SystemUserIndex',
  components: { Pagination, JsonViewer },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      listQueryFieldMap: [
        { field: 'route', label: '路由地址' },
        { field: 'trace_id', label: '链路ID' }
      ],
      listQueryField: 'route',
      listQueryFieldValue: null,
      listQuery: {
        page: 1,
        page_size: 10,
        route: null,
        trace_id: null,
        method: null
      },
      methodMap: {
        GET: 'primary',
        POST: 'success'
      },
      httpStatusCodeMap: {
        200: 'success',
        404: 'warning',
        500: 'danger'
      },
      responseCodeMap: {
        0: 'success'
      },
      drawerVisible: false,
      rowData: {
        trace_id: '',
        user_id: '',
        method: '',
        route: '',
        ip: '',
        request_at: '',
        request_data: '',
        http_status_code: '',
        response_code: '',
        response_at: '',
        response_data: ''
      },
      rowJsonDrawerTitle: '详情',
      methods: [
        { value: 'GET', label: 'GET请求' },
        { value: 'POST', label: 'POST请求' }
      ]
    }
  },
  watch: {
    listQueryField(newField, oldField) {
      this.listQuery[newField] = this.listQueryFieldValue
      this.listQuery[oldField] = null
    },
    listQueryFieldValue(newValue, oldValue) {
      this.listQuery[this.listQueryField] = newValue
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resetGetList() {
      this.listQuery = {
        page: 1,
        page_size: 10,
        route: null,
        trace_id: null,
        method: null
      }
      this.listQueryFieldValue = null
      this.getList()
    },
    getList() {
      this.listLoading = true
      getHttpLogList(this.listQuery).then(res => {
        this.list = res.list
        this.total = res.total
      })
      this.listLoading = false
    },
    clickShowJsonData(row) {
      this.rowData = {
        trace_id: row.trace_id,
        user_id: row.user_id,
        method: row.method,
        route: row.route,
        ip: row.ip,
        request_at: row.request_at,
        request_data: JSON.parse(row.request_data),
        http_status_code: row.http_status_code,
        response_code: row.response_code,
        response_at: row.response_at,
        response_data: JSON.parse(row.response_data)
      }
      this.drawerVisible = true
    },
    handleCopy(text, event) {
      clipboard(JSON.stringify(text), event)
    }
  }
}
</script>
